import { defineComponent, reactive, ref, computed, onMounted, onUnmounted } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import Insured2023ListService from "@/modules/groupOrderManagement/Insured2023List.service";
import useNavigator from "@/hooks/useNavigator";
import { useStore as useUserStore } from "@/store/user";
import { message, Modal } from "ant-design-vue";
import { $groupOrderExportData } from "@/api/groupOrder/groupOrder";
import { useRouter } from "vue-router";
import eventBus from "@/common/mitt";

export default defineComponent({
  name: "groupOrderEntryPage",
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const navigator = useNavigator();
    const visible = ref(false);
    const numberProgress = ref(0);
    const state = reactive({
      toolbar: {
        left: ["refresh",],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: "80px",
        },
        {
          title: "保司保单号",
          dataIndex: "insurance_order_no",
          align: "center",
          width: "160px",
        },
        {
          title: "姓名",
          dataIndex: "name",
          align: "center",
          width: "70px",
        },
        {
          title: "证件号",
          dataIndex: "id_no",
          align: "center",
          width: "100px",
        },
        {
          title: "手机号",
          dataIndex: "mobile",
          align: "center",
          width: "80px",
        },
        {
            title: "城市",
            dataIndex: "city",
            align: "center",
            width: "100px",
          },
          {
            title: "区/县",
            dataIndex: "area",
            align: "center",
            width: "80px",
          },
          {
            title: "乡镇/街道",
            dataIndex: "street",
            align: "center",
            width: "80px",
          },
          {
            title: "村/社区",
            dataIndex: "village",
            align: "center",
            width: "80px",
          },
        {
          title: "生效日期",
          dataIndex: "people_start_date",
          align: "center",
          width: "180px",
        },
          {
            title: "承保日期",
            dataIndex:"insure_time",
            align: "center",
            width: "180px",
          },
      ],
      loading: false,
      searchForm: {
        insured_id_no: {
          type: "input",
          label: "被保人证件号",
          attrs: { placeholder: "请输入被保人证件号" },
        },
        start_date_begin: {
          type: "date",
          label: "生效开始时间",
          attrs: { placeholder: "请选择生效开始时间" },
        },
        start_date_end: {
            type: "date",
            label: "生效结束时间",
            attrs: { placeholder: "请选择生效结束时间" },
          },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    // 服务
    const $service = new Insured2023ListService();
    // 表格节点
    const LTableRef = ref(null as any);
    const DetailRef = ref(null as any);
    const tableRow = () => {
      LTableRef.value.$fetchTableData();
    };
    const deleteRow = (id: string | number) => {
      Modal.confirm({
        title: "提示",
        content: "确认取消?",
        onOk: () => {
          $service.delete({
            order_no: id,
          }).then((res: any) => {
            LTableRef.value.$fetchTableData();
          });
        },
      });
    }
    const exportData = (e: any) => {
      $groupOrderExportData({
        order_no: navigator?.route?.query?.order_no,
        number: e,
      }).then((res: any) => {
        numberProgress.value = (res?.data?.finish || 0) / (res?.data?.total || 0) * 100;
        if (res?.data?.status === 1) {
          window.open(res.data.url);
        }
        else if (res?.data?.status === 10) {
          exportData(e);
        }
        else if (res?.data?.status === -1) {
          visible.value = false;
          message.error("导出清单失败,请联系技术人员")
        }
      })
    }
    onMounted(() => {
      eventBus.groupOrderEntryImportConfirm.on(() => {
        tableRow();
      })
    })
    onUnmounted(() => {
      eventBus.groupOrderEntryImportConfirm.off();
    })
    return () => (
      <Page>
        <CardWithTitle title="2023承保人员">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              //row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // // 操作栏
                //   if (column.dataIndex === "operation") {
                //     return (
                //       <div class="operation">
                //         <a-button
                //           type="primary"
                //           size="small"
                //           onClick={() => {
                //             navigator.push({
                //               path: "/groupOrderManagement/subsistenceDetailPage",
                //               query: {
                //                 order_no: record.order_no,
                //               },
                //             });
                //           }}
                //         >
                //           查看清单
                //         </a-button>
                //       </div>
                //     );
                //   }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        {
          <a-modal v-model:visible={visible.value} width="1000px" title="清单下载进度" closable={false}
            maskClosable={false}
            ok-button-props={{ disabled: (numberProgress.value == 100 ? false : true) }}
            cancel-button-props={{ disabled: (numberProgress.value == 100 ? false : true) }}
            onOk={() => {
              visible.value = false;
            }}
            cancel={() => {
              visible.value = false;
            }}
          >
            <a-progress percent={numberProgress.value} />
          </a-modal>
        }
        {/* <Voucher
          ref={voucherRef}
          onConfirm={() => {
            tableRow();
          }}
        /> */}
      </Page>
    );
  },
});